<template>
  <page-header-wrapper>
    <page-tab-list>
      <div v-loading="loading">
        <a-alert message="设备id请咨询上级服务商获取,一般贴在音响设备上" type="info" show-icon style="margin: 24px 0" />
        <a-row>
          <a-col :span="10">
            <a-input-group compact>
              <a-input placeholder="请输入设备ID" v-model="deviceName" style="width: 300px"/>
              <a-button type="primary" @click="bind" :disabled="deviceName == ''" :loading="btnLoading">绑定</a-button>
              <a-button type="danger" @click="bind('unbind')" :disabled="deviceName == ''" :loading="btnLoading">解绑当前设备</a-button>
            </a-input-group>
          </a-col>
          <a-col :span="10">
            <div v-if="deviceName != ''">
              在线状态: <a-tag color="blue" v-if="online === 1">在线</a-tag><a-tag color="red" v-else>离线</a-tag>
              <span v-if="online === 1">
                <a-button type="primary" @click="sendTest(1)" :loading="btnLoading1" style="margin-left: 20px">微信测试</a-button>
                <a-button type="primary" @click="sendTest(2)" :loading="btnLoading2" style="margin-left: 20px">支付宝测试</a-button>
              </span>
            </div>
          </a-col>
        </a-row>
      </div>
    </page-tab-list>
  </page-header-wrapper>
</template>
<script>
import { setVoiceDeviceInfo, getVoiceDeviceInfo, testVoiceDevice } from '@/api/store'

export default {
  name: 'VoiceBroadcast',
  components: {},
  data () {
    return {
      loading: true,
      btnLoading: false,
      btnLoading1: false,
      btnLoading2: false,
      deviceName: '',
      online: 0
    }
  },
  created () {
    this.getData()
    setTimeout(() => {
      this.loading = false
    }, 3000)
  },
  methods: {
    getData: function () {
      this.loading = true
      getVoiceDeviceInfo({})
        .then((res) => {
          if (res.code == 0) {
            this.deviceName = res.data.device_name
            this.online = res.data.online
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.loading = false
        })
    },
    bind: function (type) {
      this.btnLoading = true
      setVoiceDeviceInfo({ device_name: this.deviceName, type })
        .then((res) => {
          this.getData()
          if (res.code == 0) {
            this.$message.success(res.msg)
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.btnLoading = false
        })
    },
    sendTest: function (type) {
      if (type == 1) {
        this.btnLoading1 = true
      } else {
        this.btnLoading2 = true
      }
      testVoiceDevice({ type })
        .then((res) => {
          if (res.code == 0) {
            this.$message.success(res.msg)
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          if (type == 1) {
            this.btnLoading1 = false
          } else {
            this.btnLoading2 = false
          }
        })
    }
  }
}
</script>
<style scoped>
</style>
